<template>
  <div class="search">
    <el-autocomplete
        clearable
        :fetch-suggestions="querySearch"
        @select="handleSelect"
        placeholder="请输入医院名称"
        :trigger-on-focus="false"
        v-model="hosName"
    />
    <el-button
        type="primary"
        :icon="Search"
    />
  </div>
</template>

<script setup lang="ts">
import {Search} from "@element-plus/icons-vue";
import {ref} from 'vue'
import {HospitalDetailInfoResponseData} from '@/api/home/type'
import {home} from '@/api/home/index'
import {useRouter} from 'vue-router'

let $router = useRouter()
let hosName = ref<string>('')
/*当完成输入后触发，进行数据查寻*/
const querySearch = async (data:string,callback:Function)=>{
  let result:HospitalDetailInfoResponseData = await home.findByHosname(data)
  callback(result.data.map((value, index, array)=>{
    return {
      "value":value.hosname,
      "hoscode":value.hoscode
    }
  }))
}
/*数据被选择的时候触发*/
const handleSelect = (item:any)=>{
  //以后会将参数传递过去,item 就是前面查询后点击返回的数据
  console.log(item)
  $router.push({path:'/hospital/register',query:{'hosCode':item.hoscode}})
}
</script>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;

  ::v-deep(.el-input__wrapper) {
    width: 500px;
  }
}
</style>